var content = document.getElementById("content");
let count = document.getElementById('comment').firstElementChild;//获取评论数量的元素
let ipt = document.getElementById('ipt').children[0]//获取输入框
var submitBtn = document.getElementById("submit")//获取发送按钮


function del(el, id) {//封装删除评论方法

    let sure = confirm('你确定要删除吗');
    if (!sure) {
        alert('已取消删除');
        return
    }
    $.ajax({
        url: "http://chst.vip:1902/students/del",
        data: {
            id
        }
    })
        .then(res => {
            console.log("====", res);

            if (res.state) {
                //删除成功,更新视图
                //单击删除
                content.removeChild(el);
                render()
            } else {
                //提示错误
                alert(res.msg)
            }
        })
}
//获取接口
function render() {
    $.ajax({
        url: "http://chst.vip:1902/students/getstulist",
        type: "get"
    })
        .then(res => {
            //先清空content中的内容
            content.innerHTML = "";
            console.log(res);
            var messages = res.data;
            //设置评论的数量
            console.log(count);

            count.innerHTML = `评论:${messages.length}条`;

            //根据数据动态创建结构
            for (var i = 0; i < messages.length; i++) {
                var msg = messages[i];//每一天数据
                var tip = document.createElement("div");
                //console.log(tip);
                tip.className = "tip1";
                tip.id = msg.id;//将id绑在纸条盒子上
                var str = '<div class="tip_h" title="双击关闭纸条">'
                    + '<div class="num">第[' + msg.id.slice(8) + ']条 ' + msg.time + '</div>'
                    + '<div class="close" title="关闭纸条">×</div>'
                    + '<div class="clr"></div>'
                    + '</div>'
                    + '<div class="tip_c">'
                    + msg.content
                    + '</div>'
                    + '<div class="tip_f">'
                    + '<div class="icon">'
                    + '<img src="images/bpic_1.gif" alt="" title="">'
                    + '</div>'
                    + '<div class="name">' + msg.name + '</div>'
                    + '<div class="clr"></div>'
                    + '</div>';
                tip.innerHTML = str;
                content.appendChild(tip);//追加到content里
                //2.动态生成位置
                //水平位置 x 
                var x = parseInt(Math.random() * (800-400) + 400);
                //竖直位置 y 
                var y = parseInt(Math.random() * 400);
                //设置位置
                tip.style.left = x + "px";
                tip.style.top = y + "px";
                //3.添加功能
                //3.1点击当前纸条让当前纸条层级最高
                var zIndex = 0;//记录层级的最大值               
                // tip.onselect = function (e) { e.preventDefault() }//文本被选中时
                tip.onclick = function () {
                    zIndex++;
                    this.style.zIndex = zIndex;
                };
                //3.2双击头部关闭纸条
                var header = tip.firstElementChild;
                header.ondblclick = function () {
                    //把当前双击的这个头部 所属的纸条从content中移除
                    var tip = this.parentNode;
                    //获取id
                    let id = this.parentNode.id;
                    del(tip, id)
                };


                header.onmousedown = function (e) { //在纸条顶部按下,拖拽纸条移动
                    let ofx = e.offsetX;
                    let ofy = e.offsetY;

                    console.log(content.offsetWidth + content.offsetLeft);

                    let _this = this;

                    content.onmousemove = function (e) {//移动事件绑定给content防止甩飞
                        let pgx = e.pageX - ofx;
                        let pgy = e.pageY - ofy;

                        //限制拖拽纸条的的范围,要在内容区域中
                        let minLeft = content.offsetLeft;//最小的水平位置
                        let maxLeft = content.offsetWidth + content.offsetLeft - _this.offsetWidth;//最大的水平位置;


                        let maxTop = content.offsetHeight - _this.parentNode.offsetHeight;//最大的垂直位置
                        let minTop = 0;//最小的垂直位置

                        if (pgx < minLeft) {
                            pgx = minLeft;
                        } else if (pgx > maxLeft) {
                            pgx = maxLeft
                        }

                        if (pgy < minTop) {
                            pgy = minTop;
                        } else if (pgy > maxTop) {
                            pgy = maxTop
                        }

                        _this.parentNode.style.left = pgx + "px";
                        _this.parentNode.style.top = pgy + "px";
                    }
                }
                header.onmouseup = function () {//鼠标弹起移除移动事件
                    content.onmousemove = null
                }
                content.onmouseleave = function () {//注册这个事件放置鼠标拖出盒子外后再回来,纸条还跟随移动的问题
                    this.onmousemove = null;
                }
                //3.3单击小叉号 关闭当前纸条
                //getElementsByClassName 通过类名获取元素
                var close = tip.getElementsByClassName("close")[0];
                close.onclick = function () {

                    //获取父节点绑定的数据id
                    let id = this.parentNode.parentNode.id;
                    var tip = this.parentNode.parentNode;
                    del(tip, id)//也要从远程服务器中删除

                };
            }

        })
}
render() //首次加载
//评论功能
//禁用按钮的方法
function disableBtn() {
    let val = ipt.value;
    //非空验证,如果没有输入,禁用按钮
    if (!val) {
        submitBtn.disabled = true;
        submitBtn.style.background = "#ccc"
    }
}
disableBtn()

//评论输入框输入事件
ipt.oninput = function () {
    //解禁按钮
    submitBtn.disabled = false;
    submitBtn.style.background = "hotpink";
    //如果输入的值是空,重新禁用按钮,这个方法会自己判断
    disableBtn()
}

//点击提交事件处理函数


function submitComment() {
    //获取输入框的值
    let content = ipt.value;
    //弹出确认输入框,输入昵称
    let name = prompt('请输入你的昵称');
    console.log(content);
    if (!name) {
        alert('昵称不能输入为空')
        return
    }
    //发送ajax 提交评论
    $.ajax({
        url: "http://chst.vip:1902/students/addlist",
        type: 'post',
        data: {
            content,
            name
        }
    }).then(res => {
        //如果添加成功 更新视图
        if (res.state) {
            render()
            var kong=document.getElementById('txt')
            document.getElementById('test').value = "";
        } else {
            //提示错误
            alert('提交出错')
        }
    })
}
//点击事件
var submit = document.querySelector('#submit')
submit.onclick =function(){
    submitComment();
}
//按回车提交

document.onkeydown = function (e) {
    if (e.keyCode === 13 && !submitBtn.disabled) {//回车的时候 按钮不能是禁用状态
        submitComment()
    }
}